<template>
  <div class="container">
    <select-file title="选择头像" @select="selectedFile" :visible.sync="dialogSelectFile"></select-file>
    <el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogAvatar" @close="handleCloseDialogAvatar">
      <cropper-dialog
        ref="cropperDialog"
        :file-img="fileImg"
        :select-img="selectedImgRow"
        :avatar="userInfo.avatar"
        @noCropSave="saveNoCropAvatar"
        @croppedCanvas="saveAvatar">
      </cropper-dialog>
    </el-dialog>
    <el-dialog class="dialog-cm" width="400px" :title="passwordFormTitle" :visible.sync="dialogChangePassword">
      <el-form ref="passwordForm" size="medium" :model="passwordForm" :rules="rules" label-width="100px" @submit.native.prevent>
        <el-form-item v-show="!validOldPass" label="旧密码" prop="oldPassword">
          <el-input type="password" v-model="passwordForm.oldPassword" @keyup.enter.native="onSavePassword" show-password />
        </el-form-item>
        <el-form-item v-show="validOldPass" label="新密码" prop="password">
          <el-input ref="newPasswordInput" type="password" v-model="passwordForm.password" show-password/>
        </el-form-item>
        <el-form-item v-show="validOldPass" label="确认新密码" prop="checkPass">
          <el-input type="password" v-model="passwordForm.checkPass" @keyup.enter.native="onSavePassword" show-password/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <a class="forget-password" @click="forget">忘记密码?</a>
        <el-button size="small" @click="dialogChangePassword = false">取 消</el-button>
        <el-button size="small" :loading="userUpdateLoading" type="primary" @click="onSavePassword">确 定</el-button>
      </div>
    </el-dialog>
    <el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="80px">
      <el-form-item label="头像" class="form-item-avatar">
        <div style="height: 100px; width: 100px;">
          <el-avatar icon="el-icon-user-solid" class="avatar-value" shape="circle" :size="100" fit="fit" :src="srcImage"  ></el-avatar>
        </div>
        <div class="avatar-button">
          <el-button title="选择文件" type="primary" icon="el-icon-folder" circle @click="selectImg"></el-button>
          <el-button title="上传" type="primary" icon="el-icon-upload2" circle @click="uploadImg"></el-button>
          <input ref="selectImg" type="file" style="display: none;" accept="image/*" @change="changImg"></input>
        </div>
      </el-form-item>
      <el-form-item label="密码">
        <el-button size="mini" round @click="changePassword">修改密码</el-button>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="cusomerInfoForm.showName" class="input-none-width"/>
      </el-form-item>
      <el-form-item label="标语">
        <el-input class="form-slogan" v-model="cusomerInfoForm.slogan" />
      </el-form-item>
      <el-form-item label="个人简介">
        <el-input class="form-slogan" type="textarea" v-model="cusomerInfoForm.introduction"></el-input>
      </el-form-item>
      <el-form-item v-show="percentage > 0" label="使用情况">
        <el-progress class="quota-space" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" :loading="userUpdateLoading" @click="onSubmit">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getInfo, userUpdate, validOldPass, updatePass} from '@/api/user'
  import { formatSize } from '@/utils/number'
  import CropperDialog from '@/components/Cropper/dialog'
  import SelectFile from "@/components/ShowFile/SelectFile"
  import fileConfig from "@/utils/file-config";

  export default {
    name: 'cusomerInfo',
    components: {
      CropperDialog, SelectFile
    },
    props: {
    },
    data() {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.passwordForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        imageUrl: `${process.env.VUE_APP_BASE_API}/view/thumbnail?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
        title: "个人信息",
        userUpdateLoading: false,
        dialogAvatar: false,
        dialogChangePassword: false,
        cropper:'',
        percentage: 0,
        userInfo: {},
        customColors: [
          {color: '#f56c6c', percentage: 100},
          {color: '#e6a23c', percentage: 80},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 40},
          {color: '#6f7ad3', percentage: 20}
        ],
        cusomerInfoForm: {
        },
        passwordForm: {
          oldPassword: '',
          password: '',
          checkPass: '',
        },
        srcImage: '',
        fileImg: new Blob(),
        selectedImgRow: {},
        rules: {
          oldPassword: [
            { required: true, message: '请输入旧密码', trigger: 'blur' },
            { min: 6, message: '密码不能小于6个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码不能小于6个字符', trigger: 'blur' }
          ],
          checkPass: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
        },
        validOldPass: false,
        passwordFormTitle: '',
        dialogSelectFile: false,
      }
    },
    computed: {
    },
    mounted() {
      this.getInfo()
    },
    methods: {
      uploadImg() {
        this.$refs.selectImg.click()
      },
      selectImg() {
        this.dialogSelectFile = true
      },
      selectedFile(row) {
        this.dialogAvatar = true
        this.selectedImgRow = row
        if(this.$refs.cropperDialog){
          this.$refs.cropperDialog.setSelectImg(this.selectedImgRow)
        }
      },
      handleCloseDialogAvatar() {
        this.$refs.selectImg.value = ''
      },
      changImg(e) {
        const files = e.target.files
        if(files.length < 1){
          return
        }
        if(files[0].size/1024/1024 > 5){
          this.$message({
            message: '选择的图片不能超过5M',
            type: 'warning'
          });
          return
        }
        this.fileImg = files[0]
        this.dialogAvatar = true
        this.selectedImgRow = {}
        if(this.$refs.cropperDialog){
          this.$refs.cropperDialog.changImg(files[0])
        }
      },
      getInfo(){
        getInfo().then(async res => {
          this.userInfo = res.data
          if (this.userInfo.roles && this.userInfo.roles.includes('admin')) {
            this.$emit('isAdmin', true)
          }
          await this.$nextTick()
          this.cusomerInfoForm = this.userInfo
          this.srcImage = this.userInfo.avatar ? this.imageUrl + this.userInfo.avatar : require('../../../assets/img/default-avatar.png')
        })
      },
      async changePassword() {
        this.validOldPass = false
        this.dialogChangePassword = true
        await this.$nextTick()
        this.passwordFormTitle = '旧密码'
        this.$refs.passwordForm.resetFields()
      },
      onSubmit() {
        this.userUpdate(this.setFormData())
      },
      // 忘记密码
      forget() {
        this.$alert('请联系管理员重置密码', '提示', {
          confirmButtonText: '确定',
        });
      },
      // 确认密码
      onSavePassword() {
        if(this.validOldPass){
          this.$refs.passwordForm.validate((valid) => {
            this.valid = valid
            if (valid) {
              if(this.validOldPass){
                // 修改密码
                this.userUpdateLoading = true
                let data = new FormData()
                data.append("id",this.$store.state.user.userId)
                data.append("password",this.passwordForm.password)
                updatePass(data).then(() => {
                  this.userUpdateLoading = false
                  this.dialogChangePassword = false
                }).catch(()=>{
                  this.userUpdateLoading = false
                })
              }
              return true
            }
            return false
          });
        } else {
          // 验证旧密码
          this.userUpdateLoading = true
          validOldPass({
            id: this.$store.state.user.userId,
            password: this.passwordForm.oldPassword
          }).then(() => {
            this.userUpdateLoading = false
            this.validOldPass = true
            this.passwordFormTitle = '新密码'
            let that = this
            setTimeout(function (){
              that.$refs.newPasswordInput.focus()
            })
          }).catch(()=>{
            this.userUpdateLoading = false
          })
        }
      },
      progressFormat() {
        const space = this.userInfo.takeUpSpace/1024/1024/1024
        const quota = this.userInfo.quota
        if(space && quota > 0){
          const percentage = Number((space/quota * 100).toFixed(1))
          this.percentage = percentage > 100 ? 100 : percentage
          return `${this.percentage}% (${formatSize(this.userInfo.takeUpSpace)}/${quota}GB)`;
        }
      },
      // 设置formData
      setFormData() {
        let data = new FormData();
        for (let formKey in this.cusomerInfoForm) {
          if(this.cusomerInfoForm.hasOwnProperty(formKey)){
            if(formKey !== 'avatar'){
              data.append(formKey,this.cusomerInfoForm[formKey])
            }
          }
        }
        data.delete("createTime")
        data.delete("updateTime")
        return data
      },
      // 保存头像
      saveAvatar(dataURL, blob) {
        this.dialogAvatar = false
        this.srcImage = dataURL
        let data = new FormData();
        data.append('id', this.$store.state.user.userId)
        // data.append('avatar', dataURL)
        data.append('blobAvatar',blob)
        this.userUpdate(data,dataURL)
      },
      blobToFile(blob){
        return new window.File(
          [blob],
          blob.name,
          { type: blob.type }
        )
      },
      // 保存不剪裁的头像
      saveNoCropAvatar(fileId) {
        this.dialogAvatar = false
        let data = new FormData();
        data.append('id', this.$store.state.user.userId)
        data.append('avatar', fileId)
        this.userUpdate(data)
      },
      // 修改用户信息操作
      userUpdate(data, dataURL){
        this.userUpdateLoading = true
        userUpdate(data).then((res) => {
          this.userUpdateLoading = false
          this.$message({
            message: '保存成功!',
            type: 'success',
            duration: 1000
          })
          if(dataURL || res.data){
            this.srcImage = this.imageUrl + res.data
            this.$store.state.user.avatar = res.data
          }
          if(data.get('showName') != null){
            this.$store.state.user.showName = data.get('showName')
          }
        }).catch(() => {
          this.userUpdateLoading = false
        })
      }
    }
  }
</script>

<!--<style src="@styles/cropper.css"></style>-->
<style lang="scss" scoped>
  @import "src/styles/setting";
  .forget-password {
    font-size: 12px;
    margin-left: 10px;
    color: #409eff;;
  }
  >>>.form-item-avatar {
    .el-form-item__content {
      display: flex;
      .avatar-button {
        padding: 30px 12px;
      }
    }
    .el-button+.el-button {
      margin-left: 0;
    }
  }
  @media screen and (max-width: 768px) {
    >>> .el-divider--vertical {
      display: none;
    }
    .avatar-preview {
      display: none;
    }
  }
</style>
